<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas</title>
    <style></style>
  </head>
  <body>
    <h2>Canvas Paint</h2>
    <!-- 设置 canvas 宽高在便签内属性设置，不要用 css 设置 -->
    <!-- 用 css 设置宽高会拉伸 canvas 画布 -->
    <canvas id="demo"> </canvas>

    <script>
      // 第一步 拿到 canvas 标签
      const $canvas = document.querySelector('#demo')
      // 样式修改
      $canvas.style.border = '1px solid blue'
      $canvas.width = 600
      $canvas.height = 600
      // 不要用以下这样设置 canvas 宽高（和 css 设置时的问题一样）
      // $canvas.style.height=600
      // 第二步 拿到 canvas 的上下文
      const context = $canvas.getContext('2d')
      // 开始绘制
      // 坐标移动到-----坐标
      context.moveTo(100, 100)

      // 从当前坐标开始，画直线到 坐标---
      context.lineTo(200, 100)
      context.lineTo(100, 200)

      // 闭合路径（使得当前路径结束点和开始点连接起来）
      context.closePath()
      // 设置线宽（一半绘制在图形内，一半绘制在图形外，此处 5像素靠内，5像素靠外）
      context.lineWidth = 10

      // 配置绘制样式（color 能用啥，它就能用啥）
      context.strokeStyle = '#da4d40'
      // 绘制（默认黑色）
      context.stroke()
      // 配置填充颜色
      context.fillStyle = 'orange'
      // 填充（默认黑色）
      context.fill()
    </script>
  </body>
</html>
